<template>
  <cm-popup ref="cmPopup" direction="bottom">
    
    <cm-picker-head
      :col-names="colNames"
      @right-click="confirmClickhHandler"
      @left-click="cancelClickHandler">
      <view class="cm-picker-date-popup-switch cm-flex" v-if="type === 'both'">
        <view class="cm-picker-date-popup-switch-item" :class="[ isSolarPicker ? 'active' : '' ]" @click="changePicker(true)">公历</view>
        <view class="cm-picker-date-popup-switch-split"></view>
        <view class="cm-picker-date-popup-switch-item" :class="[ !isSolarPicker ? 'active' : '' ]" @click="changePicker(false)">农历</view>
      </view>
      <slot v-else></slot>
    </cm-picker-head>
    
    <!-- 通过CSS显示隐藏两个Picker的解决方案，有严重bug -->
    <!-- 公历表 -->
    <cm-picker-solar ref="solarPicker"
      v-if="type !== 'lunar'" :class="[ isSolarPicker ? '' : 'cm-none' ]"
      :cm-style="{ height: '260px' }"
      :type="solarType"
      :start="solarStart"
      :end="solarEnd"
      :values="solarValues"
      :indicator-style="indicatorStyle"
      @change="solarChangeHandler">
    </cm-picker-solar>
    <!-- 农历表 -->
    <cm-picker-lunar ref="lunarPicker"
      v-if="type !== 'solar'" :class="[ isSolarPicker ? 'cm-none' : '' ]"
      :cm-style="{ height: '260px' }"
      :type="lunarType"
      :start="lunarStart"
      :end="lunarEnd"
      :values="lunarValues"
      :indicator-style="indicatorStyle"
      @change="lunarChangeHandler">
    </cm-picker-lunar>
    
  </cm-popup>
</template>

<script src="./cm-picker-date-popup.js"></script>

<style lang="stylus">
@import './cm-picker-date-popup.styl'
</style>
